<template>
  <div calss="aaa" style="height:100%;width:100%;background-image: url('/static/images/paojectManager/dataBigSereen.png');background-repeat: no-repeat; background-size: 100% 100%; ">
    <el-row class="topRow">
      <el-col :span="6" class="topCol">
        {{nowDate}}
      </el-col>
      <el-col :span="12" class="topCol">
        <div style="font-size:24px;font-weight:blod;color:#ffffff">工程项目管理系统数据看板</div>
      </el-col>
      <el-col :span="6" class="topCol">
        用户： {{userInfo.name}} 部门：{{deptInfo.name}}
      </el-col>
    </el-row>
    <el-row style="height:83%">
      <el-col :span="5" style="height:100%">
        <el-row style="height:40%">
          <div class="dataCenter">
            <el-row type="flex" align="center" class="dataChunkBigTile">数据中心</el-row>
            <el-row class="dataRow">
              <el-col :span="12">
                <el-row type="flex" justify="center" class="dataChunkTile">签约率</el-row>
              </el-col>
              <el-col :span="12">
                <el-row type="flex" justify="left" class="dataChunkValue">{{queryData.contractRate}}</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="12">
                <el-row type="flex" justify="center" class="dataChunkTile">开票率</el-row>
              </el-col>
              <el-col :span="12">
                <el-row type="flex" justify="left" class="dataChunkValue">{{queryData.invoiceRate}}</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="12">
                <el-row type="flex" justify="center" class="dataChunkTile">收款率</el-row>
              </el-col>
              <el-col :span="12">
                <el-row type="flex" justify="left" class="dataChunkValue">{{queryData.recBillRate}}</el-row>

              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="12">
                <el-row type="flex" justify="center" class="dataChunkTile">毛利率</el-row>
              </el-col>
              <el-col :span="12">
                <el-row type="flex" justify="left" class="dataChunkValue">{{queryData.profitRate}}</el-row>
              </el-col>
            </el-row>
          </div>
        </el-row>
        <el-row style="height:60%;padding:1%;margin-top:3%">
          <div class="oneYearData">
            <el-row type="flex" align="center" class="dataChunkBigTile">项目数据</el-row>
            <el-row class="dataRow">
              <el-col :span="10">
                <el-row type="flex" justify="center" class="dataChunkTile">项目金额</el-row>
              </el-col>
              <el-col :span="14">
                <el-row type="flex" justify="end" class="dataChunkValue">{{formateTec(queryData.projectMoneySum)}}元</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="10">
                <el-row type="flex" justify="center" class="dataChunkTile">合同金额</el-row>
              </el-col>
              <el-col :span="14">

                <el-row type="flex" justify="end" class="dataChunkValue">{{formateTec(queryData.contractMoneySum)}}元</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="10">
                <el-row type="flex" justify="center" class="dataChunkTile">开票金额</el-row>
              </el-col>
              <el-col :span="14">
                <el-row type="flex" justify="end" class="dataChunkValue">{{formateTec(queryData.invoiceMoneySum)}}元</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="10">
                <el-row type="flex" justify="center" class="dataChunkTile">收款金额</el-row>
              </el-col>
              <el-col :span="14">
                <el-row type="flex" justify="end" class="dataChunkValue">{{formateTec(queryData.recBillMoneySum)}}元</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="10">
                <el-row type="flex" justify="center" class="dataChunkTile">收入金额</el-row>
              </el-col>
              <el-col :span="14">
                <el-row type="flex" justify="end" class="dataChunkValue">{{formateTec(queryData.confirmrevenuemoneySum)}}元</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="10">
                <el-row type="flex" justify="center" class="dataChunkTile">预算金额</el-row>
              </el-col>
              <el-col :span="14">
                <el-row type="flex" justify="end" class="dataChunkValue">{{formateTec(queryData.budgetMoneySum)}}元</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="10">
                <el-row type="flex" justify="center" class="dataChunkTile">采购金额</el-row>
              </el-col>
              <el-col :span="14">
                <el-row type="flex" justify="end" class="dataChunkValue">{{formateTec(queryData.purchasepaymentmoneySum)}}元</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRow">
              <el-col :span="10">
                <el-row type="flex" justify="center" class="dataChunkTile">成本金额</el-row>
              </el-col>
              <el-col :span="14">
                <el-row type="flex" justify="end" class="dataChunkValue">{{formateTec(queryData.costmoneySum)}}元</el-row>
              </el-col>
            </el-row>
          </div>

        </el-row>
      </el-col>
      <el-col :span="14" style="height:100%;padding:1%">
        <div id="echartsContainer"></div>
        <el-row type="flex" justify="center">
          <el-col :span="12" :push="3">
            <el-button-group id="editGroupButtons" class="timeFlagGroup">
              <el-button type="primary" class="buttonBgColor" size="medium" @click="timeFlagClick('beforLastYear')">前年以来 <i class="el-icon-arrow-right el-icon--right"></i> </el-button>
              <el-button type="primary" class="buttonBgColor" size="medium" @click="timeFlagClick('lastYear')">去年以来<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              <el-button type="primary" class="buttonBgColor" size="medium" @click="timeFlagClick('thisYear')">今年以来<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </el-col>

        </el-row>
      </el-col>

      <el-col :span="5" style="height:100%;padding:1%">
        <el-row style="height:40%">
          <div class="projectState">
            <el-row style="height:100%">
              <div id="projectStatPie" style="height:100%"></div>
            </el-row>
          </div>
        </el-row>
        <el-row style="height:60%;padding:1%;margin-top:3%">
          <div class="top10">
            <el-row type="flex" align="center" class="top10Title">销售经理签订金额TOP10</el-row>
            <el-row class="dataTitleForTop10">
              <el-col :span="3">
                <el-row type="flex" justify="center" class="top10Label">排名</el-row>
              </el-col>
              <el-col :span="8">
                <el-row type="flex" justify="center" class="top10Label">姓名</el-row>
              </el-col>
              <el-col :span="13">
                <el-row type="flex" justify="center" class="top10Label">签订金额（元）</el-row>
              </el-col>
            </el-row>
            <el-row class="dataRowForTop10" v-for="(item , index) in queryData.areamanagerTop10" :key="item.areamanagerCode">
              <el-col :span="2">
                <el-row type="flex" justify="center" class="top10Content">
                  <img v-if="index<=2" style="height:1.8vh;width:1.8vh" :src="'/static/images/paojectManager/medal'+(index+1)+'.png'" />
                  <span v-else>{{index+1}}</span>
                </el-row>
              </el-col>
              <el-col :span="9">
                <el-row type="flex" justify="center" class="top10Content">{{item.areamanagerName}}</el-row>
              </el-col>
              <el-col :span="13">
                <el-row type="flex" justify="center" class="top10Content">{{item.money}}</el-row>
              </el-col>
            </el-row>

          </div>
          <el-row type="flex" justify="end" style="margin-top:3.2vh">
            <el-button style="background:#042E50" type="primary" @click="backToPm"><i class="el-icon-arrow-right el-icon--right"></i></el-button>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from '@tapui/store'
import { getAction } from '@tapui/utils/http'
import echarts from 'echarts'
import '../../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
// import { formateTec } from '../../../utils/calculation'

export default {
  name: 'dashboard',
  data() {
    return {
      nowDate: '',
      userInfo: {},
      deptInfo: {},
      timeFlag: 'thisYear',
      dataList: [],
      queryData: {}
    }
  },
  methods: {
    backToPm() {
      this.$router.go(-1)
    },
    // 点击时间flag
    timeFlagClick(timeFlag) {
      this.timeFlag = timeFlag
      this.getDataList()
    },
    // 获取大屏数据
    getDataList() {
      getAction('/pm/project/dataBigScreen', { timeFlag: this.timeFlag }).then(res => {
        this.dataList = res.result.mapData
        this.queryData = res.result
        this.drawMap()
        this.setProjectStatusPie()
      })
    },

    //   中国地图绘制
    drawMap() {
      let mychart = echarts.init(document.getElementById('echartsContainer'))

      var option = {
        tooltip: {
          formatter: function(params, ticket, callback) {
            if (params.name && params.value) {
              return params.seriesName + '<br />' + params.name + '：' + params.value
            } else {
              return params.seriesName + '<br />' + params.name + '：' + 0
            }
          }
        },
        visualMap: {
          min: 0,
          max: this.queryData.mapMaxNum,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          inRange: {
            color: ['#BE77FF', '#4B0091'] // 图例中的颜色，第一个为值最低的颜色，第二个为值最高时的颜色
          },
          show: true
        },
        geo: {
          map: 'china',
          roam: false,
          zoom: 1.23,
          label: {
            // 省名称字体设置
            normal: {
              show: true,
              fontSize: '14',
              color: '#F0F0F0'
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#042E50', // 大地图背景色
              borderColor: '#0066ba' // 省份分割线颜色
            },
            emphasis: {
              areaColor: '#8FAFC0', // 鼠标悬浮颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            name: '工程数量',
            type: 'map',
            geoIndex: 0,
            data: this.dataList
          }
        ]
      }
      mychart.setOption(option)
    },
    // 项目状态饼图
    setProjectStatusPie() {
      // let mychart = echarts.init(this.$el, 'macarons')

      let mychart = echarts.init(document.getElementById('projectStatPie'))
      var seriesForThis = this.queryData.pieData
      let option = {
        // color: ['#0066FF', '#00FF66', '#66CCFF'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },

        legend: [
          {
            orient: 'vertical',
            textStyle: { color: '#8fafc0', fontSize: '13' },
            top: '70%',
            itemGap: 5,
            height: 60,
            formatter: function formatter(name) {
              var index = 0
              var dataTemp = seriesForThis
              dataTemp.forEach(function formatter(value, i) {
                if (value.name === name) {
                  index = i
                }
              })
              return name + dataTemp[index].value + '个'
            },
            data: seriesForThis
          }
        ],
        series: [
          {
            name: '项目状态',
            type: 'pie',
            // 大小
            radius: ['60%', '48%'],
            // 位置
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            top: 0,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.queryData.pieData
          }
        ]
      }
      mychart.setOption(option)
    },
    formateTec(value) {
      if (!value) return '0.00'
      /* 原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
      /* 后来改成了 Number(value)|0,但是输入超过十一位就为负数了，具体见评论 */
      var intPart = Number(value) - (Number(value) % 1) // 获取整数部分（这里是windy93的方法）
      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断

      var floatPart = '.00' // 预定义小数部分
      var value2Array = value.toString().split('.')

      // =2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString() // 拿到小数部分

        if (floatPart.length === 1) {
          // 补0,实际上用不着
          return intPartFormat + '.' + floatPart + '0'
        } else {
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat + floatPart
      }
    },
    //   实时展示当前时间
    getDate() {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let week = new Date().getDay()
      let hh = new Date().getHours()
      let nowWeek = ''
      let mf =
        new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()

      if (week === 1) {
        nowWeek = '星期一'
      } else if (week === 2) {
        nowWeek = '星期二'
      } else if (week === 3) {
        nowWeek = '星期三'
      } else if (week === 4) {
        nowWeek = '星期四'
      } else if (week === 5) {
        nowWeek = '星期五'
      } else if (week === 6) {
        nowWeek = '星期六'
      } else {
        nowWeek = '星期日'
      }
      this.nowDate =
        yy +
        '年       ' +
        mm +
        '月       ' +
        dd +
        '日        ' +
        nowWeek +
        '    ' +
        hh +
        ':  ' +
        mf +
        ':  ' +
        ss
    }
  },
  created() {
    this.getDate()
  },
  mounted() {
    var aaa = this.formateTec(1111)
    console.log(aaa)

    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      this.getDate() // 修改数据date
    }, 1000)
    // 获取用户信息
    this.userInfo = store.getters.user
    // 获取部门信息
    this.deptInfo = store.getters.dept
    // 绘制中国地图
    // this.drawMap()
    this.getDataList()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

<style lang="scss" scope>
.dataTitleForTop10 {
  margin-top: 2vh;
  color: #8fafc0;
  height: 18px;
}
.dataChunkBigTile {
  bottom: 5px;
  color: #ffffff;
  font-size: 2.5vh;
}
.top10Label {
  font-size: 1.5vh;
  margin-bottom: 15px;
  text-align: center;
}
.dataChunkTile {
  // font-size: 16px;
  font-size: 2vh;
  margin-bottom: 15px;
}
.dataChunkValue {
  font-size: 2vh;
  color: #ffffff;
}
.dataRow {
  margin-top: 2vh;
  color: #8fafc0;
}
.app-main {
  height: 100%;
  width: 100%;
  /* background-image: url('/static/images/paojectManager/dataBigSereen.jpg'); */
}
.topCol {
  height: 100%;
  color: #8fafc0;
  text-align: center;
  padding-top: 1.5%;
}
.topRow {
  height: 10%;
}
.dataCenter {
  height: 100%;
  background-image: url('/static/images/paojectManager/dataCenter.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.projectState {
  height: 100%;
  background-image: url('/static/images/paojectManager/projectState.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.top10 {
  height: 100%;
  background-image: url('/static/images/paojectManager/top10.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.oneYearData {
  height: 100%;
  background-image: url('/static/images/paojectManager/oneYearData.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.el-scrollbar__view {
  height: 100%;
  width: 100%;
  /* background-image: url('/static/images/paojectManager/dataBigSereen.jpg'); */
}
#echartsContainer {
  width: 100%;
  height: 100%;
  margin-bottom: 8px;
  /* border: 1px solid #ddd; */
}
.row {
  margin-top: 10px;
}
.dataRowForTop10 {
  margin-top: 1.5vh;
}
.top10Content {
  font-size: 1.5vh;
  color: #8fafc0;
  text-align: left;
}
.top10Title {
  font-size: 2.5vh;
  color: #ffffff;
}
.timeFlagGroup {
  margin-top: 2vh;
}
.buttonBgColor {
  background-color: #042e50;
}
@media screen and (max-width: 1920px) {
  .dataRow {
    margin-top: 5px;
    color: #8fafc0;
  }
  .dataRowForTop10 {
    margin-top: 8px;
    color: #8fafc0;
  }
}
</style>
